<nz-card class="list_card" [nzTitle]="cardTitle">
  <!-- 检索表单 -->
  <form nz-form [nzLayout]="'vertical'" (ngSubmit)="refresh()">

    <nz-form-item nz-row nzGutter="8">
      <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
        用户名:
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="23">
        <nz-input-group nzSearch [nzSuffix]="suffixButton">
          <input type="text" nz-input [(ngModel)]="userName" (keyup.enter)="refresh()" name="userName" [placeholder]="'搜索...'">
          <ng-template #suffixButton>
            <button nz-button nzType="primary" nzSearch type="submit">
              <i class="anticon anticon-search"></i>
            </button>
          </ng-template>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <div *ngIf="advancedFiltersVisible">

      <nz-form-item nz-row nzGutter="8">
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          错误状态:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="11">
          <nz-select [(ngModel)]="hasException" name="HasException" [nzPlaceHolder]="'请选择错误状态'" nzAllowClear
            (ngModelChange)="hasExceptionChange()">
            <nz-option [nzLabel]="'全部'" nzValue=""></nz-option>
            <nz-option [nzLabel]="'成功'" nzValue="false"></nz-option>
            <nz-option [nzLabel]="'错误'" nzValue="true"></nz-option>
          </nz-select>
        </nz-form-control>
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          日期范围:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="5">
          <nz-range-picker name="DateRange" [(ngModel)]="startToEndDate" [nzPlaceHolder]="['开始日期','结束日期']"
            (ngModelChange)="dateRangeChange()"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-row nzGutter="8">
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          服务:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="11">
          <input nz-input name="Service" [(ngModel)]="serviceName" [placeholder]="'服务'">
        </nz-form-control>
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          持续时间:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="6">
          <nz-input-group nzCompact>
            <nz-input-number name="MinExecutionDuration" [(ngModel)]="minExecutionDuration" [nzPlaceHolder]="'最短执行时间'"
              [nzMin]="0" [nzMax]="86400000" [nzStep]="1" style="text-align: center; width: 152px;"></nz-input-number>
            <input type="text" disabled nz-input placeholder="~" style="width: 30px; border-left: 0px;pointer-events: none; background-color: rgb(255, 255, 255);border-top: 1px solid rgb(217,217,217);border-bottom: 1px solid rgb(217, 217, 217);">
            <nz-input-number name="MaxExecutionDuration" [(ngModel)]="maxExecutionDuration" [nzPlaceHolder]="'最长执行时间'"
              [nzMin]="0" [nzMax]="86400000" [nzStep]="1" style="text-align: center; border-left: 0px; width: 152px;"></nz-input-number>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-row nzGutter="8">
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          方法名:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="11">
          <input nz-input name="MethodName" [(ngModel)]="methodName" [placeholder]="'方法名'">
        </nz-form-control>
        <nz-form-label nz-col [nzSm]="1" style="line-height: 32px;">
          浏览器:
        </nz-form-label>
        <nz-form-control nz-col [nzSm]="11">
          <input nz-input name="BrowserInfo" [(ngModel)]="browserInfo" [placeholder]="'方法名'">
        </nz-form-control>
      </nz-form-item>

    </div>

  </form>

  <!-- 操作部分 -->
  <nz-row nzGutter="8">
    <nz-col nzMd="20" nzSm="12" class="btn-gutter">
    </nz-col>
    <nz-col nzMd="4" nzSm="12" class="text-right">
      <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
        显示高级过滤
        <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
      </a>
    </nz-col>
  </nz-row>

  <nz-table #auditLogTable [nzFrontPagination]="false" [nzData]="tableHelper.records" [nzTotal]="tableHelper.totalRecordsCount"
    [(nzPageIndex)]="tableHelper.pageIndex" [(nzPageSize)]="tableHelper.defaultPageSize" [nzLoading]="tableHelper.isLoading"
    nzNoResult="暂无数据" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
    <thead (nzSortChange)="sort($event)">
      <tr>
        <th nzShowSort nzSortKey="executionTime">时间</th>
        <th nzShowSort nzSortKey="userName">用户名</th>
        <th nzShowSort nzSortKey="serviceName">服务</th>
        <th nzShowSort nzSortKey="methodName">方法</th>
        <th nzShowSort nzSortKey="executionDuration">持续时间</th>
        <th nzShowSort nzSortKey="clientIpAddress">IP地址</th>
        <th>是否成功</th>
        <th nzWidth="140px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template ngFor let-data [ngForOf]="auditLogTable.data">
        <tr>
          <td> {{data.executionTime ? (data.executionTime | date:'yyyy-MM-dd hh:mm:ss') : '-'}}</td>
          <td>{{data.userName}}</td>
          <td>{{data.serviceName}}</td>
          <td>{{data.methodName}}</td>
          <td>{{data.executionDuration}}ms</td>
          <td>{{data.clientIpAddress}}</td>
          <td>
            <nz-switch [ngModel]="data.exception==null" nzCheckedChildren="是" nzUnCheckedChildren="否" [nzDisabled]="true"></nz-switch>
          </td>

          <td class="table_operate">
            <!-- 编辑 -->
            <ng-container *ngIf="isGranted('Pages.Administration.Users.Edit')">
              <a (click)="showDetails(data)">
                <i nz-icon [type]="'details'" theme="fill"></i> 查看详情
              </a>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'audit-log'" theme="fill"></i> 审计日志
  </div>
</ng-template>
